var vm = new Vue({
	el: '#app',
	data: {
		backhost: backhost,
		error_name: false,
		error_password: false,
		error_check_password: false,
		error_phone: false,
		error_allow: false,
		error_sms_code: false,
		sending_flag: false,

		username: '',
		password: '',
		password2: '',
		phone: '', 
		sms_code: '',
		allow: false,

		sms_code_tip: '获取短信验证码',  	
		error_sms_code_message: '', 		// 短信验证码错误提示
		error_name_message: '',  			// 用户名重复错误提示
		error_phone_message: '',			// 手机号码重复错误提示

	},
	// 字段校验
	methods: {
		// 用户名校验
		check_username: function (){
			var len = this.username.length;
			if(len<5||len>20) {
				this.error_name = true;
				this.error_name_message = '用户名需要在5到20个字符';
			} else {
				this.error_name = false;
			}

			// 检查用户名重名,Day 5 添加
			if (this.error_name == false) {
				axios.get(this.backhost + '/usernames/' + this.username + '/count/', {
					responseType: 'json'
				})
				.then(response => {
					if (response.data.count > 0) {
						this.error_name_message = '⽤户名已存在';
						this.error_name = true;
					} else {
						this.error_name = false;
					}
				})
				.catch(error => {
					console.log(error.response.data);
				})
			}
		},
		// 密码校验
		check_pwd: function (){
			var len = this.password.length;
			if(len<8||len>20){
				this.error_password = true;
			} else {
				this.error_password = false;
			}		
		},
		// 确认密码校验
		check_cpwd: function (){
			if(this.password!=this.password2) {
				this.error_check_password = true;
			} else {
				this.error_check_password = false;
			}		
		},

		// 手机号校验
		check_phone: function (){
			var re = /^1[345789]\d{9}$/;
			if(re.test(this.phone)) {
				this.error_phone = false;
			} else {
				this.error_phone_message = '手机号码格式错误';
				this.error_phone = true;
			}

			// 检查手机号重名,Day 5 添加
			if (this.error_phone == false) {
				axios.get(this.backhost + '/phones/' + this.phone + '/count/', {
					responseType: 'json'
				})
				.then(response => {
					if (response.data.count > 0) {
						this.error_phone_message = '手机号码已被注册';
						this.error_phone = true;
					} else {
						this.error_phone = false;
					}
				})
				.catch(error => {
					console.log(error.response.data);
				})
			}

		},
		// 短信验证码校验
		check_sms_code: function(){
			if(!this.sms_code){
				this.error_sms_code = true;
			} else {
				this.error_sms_code = false;
			}
		},
		// 同意协议校验
		check_allow: function(){
			if(!this.allow) {
				this.error_allow = true;
			} else {
				this.error_allow = false;
			}
		},

		// 发送短信验证码
		send_sms_code: function(){
			// 检查是否已经发送过短信
			if (this.sending_flag == true) {
				return; 
			}
			this.sending_flag = true;
			
			// 校验参数，保证输⼊框有数据填写
			this.check_phone();
			
			if (this.error_phone == true) {
				this.sending_flag = false;
				return; 
			}

			// 向后端接⼝发送请求，让后端发送短信验证码
			// http://127.0.0.1:8000/smscode/17786378545/
			// 使用域名：api.3542xyz.com 映射到 127.0.0.1
			// axios.get('http://api.3542xyz.com:8000' + '/smscode/' + this.phone + '/', {
			// 域名写成变量形式
			axios.get(this.backhost + '/smscode/' + this.phone + '/', {
				responseType: 'json'
			})
			// 如果发送短信成功
			.then(response => {
				// 倒计时60秒，60秒后允许⽤户再次点击发送短信验证码的按钮
				var num = 60;
				// 设置⼀个计时器
				var t = setInterval(() => {
				if (num == 1) {
					// 如果计时器到最后, 清除计时器对象
					clearInterval(t);
					// 将点击获取验证码的按钮展示的⽂本回复成原始⽂本
					this.sms_code_tip = '获取短信验证码';
					// 将点击按钮的onclick事件函数恢复回去
					this.sending_flag = false;
				} else {
					num -= 1;
					// 展示倒计时信息
					this.sms_code_tip = num + '秒'; }
				}, 1000, 60)
			})
			// 如果发送短信失败
			.catch(error => {
				if (error.response.status == 400) {
					// 展示发送短信错误提示
					this.error_sms_code = true;
					this.error_sms_code_message = error.response.data.message;
				} else {
					console.log(error.response.data);
				}
				this.sending_flag = false;
			})
		},

		// 注册
		on_submit: function(){

			this.check_username();
			this.check_pwd();
			this.check_cpwd();
			this.check_phone();
			this.check_sms_code();
			this.check_allow();
			
			// 前端 用户注册 校验
			if(this.error_name == false && this.error_password == false && this.error_check_password == false
			&& this.error_phone == false && this.error_sms_code == false && this.error_allow == false) {
				axios.post(this.backhost + '/users/', {
					username: this.username,
					password: this.password,
					password2: this.password2,
					phone: this.phone,
					sms_code: this.sms_code,
					allow: this.allow.toString()
				}, {
					responseType: 'json'
				})
				// 如果校验成功
				.then(response => {
					// 记录⽤户的登录状态
					sessionStorage.clear();
					localStorage.clear();
					localStorage.token = response.data.token;
					localStorage.username = response.data.username;
					// 直接重定向到 首页
					location.href = '/index.html';
				})
				// 如果校验失败	
				.catch(error=> {
					if (error.response.status == 400) {
						if ('non_field_errors' in error.response.data) {
							this.error_sms_code_message = error.response.data.non_field_errors[0];
						} else {
							this.error_sms_code_message = '数据有误';
						}
	
						this.error_sms_code = true;
					} else {
						console.log(error.response.data);
					}
				})
			}
		}
	}
});
